<!-- 兴趣爱好 -->
<template>
  <div id="">
    <headerbox :headerTitle="'兴趣爱好'" :hasBack="true"></headerbox>
    <div class="interestList mb20">
      <div v-for="(interest,index) in classifyList" :key="interest.key"
      @click="setActive(index)">
        <span>
          <img :src="imgUrlLink(interest.maxIcon)" alt="" class="insterestImg">
          <img src="@/assets/interestImage/touming.png" alt="" class="chooseImg" v-if="interest.isActive">
        </span>
        <p class="mt10">{{interest.classifyName}}</p>
      </div>
    </div>
    <div class="p10">
      <button type="button" name="button" class="blockButton" @click="setHobby">确定</button>
    </div>
  </div>
</template>
<script>
import {getClassifyList,userHobby,userSetHobby} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  data: () => ({
    classifyList:[],    //总类
    myInterestList:[],  //我的爱好
    hobbyJson:{
      token:'',
      classifyIds:'',//项目主键，多个逗号隔开
    },
    idx:'',
  }),
  methods: {
    // 图片地址拼接
    imgUrlLink(imgUrl) {
      return this.$imgUrlLink(imgUrl);
    },
    setActive(index) {
      let list = this.classifyList;
      console.log(list);
      let isActive = list[index].isActive;
      this.classifyList[index].isActive = !isActive;
      console.log(isActive);
    },
    // 设置提交
    setHobby() {
      let self = this;
      let hobbyParam = self.hobbyJson;
      let classifyIds = [];   //存放被选中的id数组
      for (var i = 0; i < self.classifyList.length; i++) {
        if (self.classifyList[i].isActive) {
          classifyIds.push(self.classifyList[i].id);
        }
      }
      hobbyParam.classifyIds = classifyIds.join(',');
      if (hobbyParam.classifyIds=='') {
        self.toast('您未选择任何的兴趣爱好');
        return false;
      }
      userSetHobby(hobbyParam).then(res=>{
        console.log(res);
        if (res) {
          self.toast(res.data.msg);
          self.$router.go(-1);
        }
      })
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    self.hobbyJson.token = xlyd_loginInfo.token;
    // 全部分类
    let p1 = new Promise((resolve, reject) => {
      getClassifyList().then(res=>{
        console.log(res);
        resolve(res);
        if(res) {
          let list = res.data.result;
          for (var i = 0; i < list.length; i++) {
            list[i].isActive = false;
          }
          self.classifyList = list
        }
      });
    })

    // 我的爱好列表
    let p2 = new Promise((resolve, reject) => {
      userHobby({token:xlyd_loginInfo.token}).then(res=>{
        console.log(res);
        resolve(res);
        if (res) {
          self.myInterestList = res.data.result;
        }
      });
    })

    let p3 = Promise.all([p1,p2]);
    p3.then(res => {
      console.log(res);
      for (var i = 0; i < self.classifyList.length; i++) {
        console.log(self.classifyList[i]);
        for (var j = 0; j < self.myInterestList.length; j++) {
            if (self.classifyList[i].id == self.myInterestList[j].classifyId) {
              self.classifyList[i].isActive = true;
            }
        }
      }
    })

  },
}
</script>
<style lang="scss" scoped>
.interestList{
  @include flex;
  flex-wrap: wrap;
  background: white;
  padding:20px 10px;
  div{
    width: 25%;
    text-align: center;
    margin-bottom: 20px;
    span{
      width: 70%;
      display: inline-block;
      position: relative;
      border-radius: 100%;
      border: 1px solid $boxBgcolor;
      .chooseImg{
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        // height: 100%;
        // background: rgba(0,0,0,0.3);
        border-radius: 100%;
        z-index: 2;
      }
      img{
        width: 62px;
        height: 62px;
      }
    }
  }
}
</style>
